/**
 *
 *
 * @author tangzehua
 * @since 2016-11-09 21:45
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    Dimensions,
    TouchableOpacity
} from 'react-native';

import Awesome from 'react-native-vector-icons/FontAwesome';

let {width, height} =  Dimensions.get('window');
export default class Test2 extends Component {
    render() {
        let img = require('./img/index_bg.png');
        return (
              <View style={{flex:1, flexDirection:'column',backgroundColor:'#efeff4'}}>
                      <Image source={img} style={{width:width, height:width*350/750,alignItems:'center', justifyContent: 'center'}} resizeMode= 'stretch'>
                          <View style={{height:50, justifyContent:'flex-end', alignItems:"center", flexDirection:'row'}}>
                              <Text style={{color:'#fff'}}>账户总资产</Text>
                              <Awesome name="angle-double-right" style={{ paddingLeft: 10,fontSize:20, color:'#fff' }}/>
                          </View>
                          <View style={{flex:1, justifyContent:'center', paddingBottom: 50 }}><Text style={{color:'#fff', fontSize: 25}}>--</Text></View>
                          <View style={{height: 50, flexDirection:'row', }}>
                              <TouchableOpacity style={[styles.mainButton, {backgroundColor:"#f7c02d"}]}>
                                  <Text style={{color:'#FFF'}}>提现</Text>
                              </TouchableOpacity>
                              <TouchableOpacity style={[styles.mainButton, {backgroundColor:"#ff7b2b"}]}>
                                  <Text style={{color:'#FFF'}}>充值</Text>
                              </TouchableOpacity>
                          </View>
                      </Image>
                      <View  style={{flexDirection:'row',backgroundColor:'#ffffff',paddingTop:10, paddingBottom:10}}>
                            <View style={{paddingLeft:15,flex:1,borderRightWidth:1,borderRightColor:'#e7e7e7'}}>
                                <Text style={styles.yue_01}>余额账户(元)</Text>
                                <Text style={styles.yue_02}>75.71</Text>
                            </View>
                            <View style={{width:width*0.4,paddingLeft:10}}>
                                <Text style={styles.yue_01}>累计收益(元)</Text>
                                <Text style={styles.yue_02}>75.71</Text>
                            </View>
                      </View>
                      <Image source={require('./img/sy_lb_02.png')}  style={{width:width,height:width*136/750,marginTop:1,marginBottom:5}}  resizeMode= 'stretch' />
                      <View style={{backgroundColor:'#fff'}}>
                          <View style={{flexDirection:'row',paddingBottom:8,marginLeft:15,marginRight:15, paddingTop:8,alignItems:'center',borderBottomWidth:1,borderColor:'#eeeeee'}}>
                              <Image source={require('./img/index_03.png')} style={{width:33,height:33}} resizeMode='stretch'/>
                              <Text style={{paddingLeft: 10,fontSize:16,color:'#333333'}}>每日红包</Text>
                              <View style={{flexDirection:'row',flex:1,justifyContent:'flex-end',alignItems:'center'}}>
                                  <Text style={{fontSize:12, color:'#a5a5a5',paddingRight:5}}>倒计时:</Text>
                                  <Text style={{fontSize:12,color:'#f16236'}}>20:00:00</Text>
                                  <Awesome name="angle-right" style={{ paddingLeft: 15,fontSize:31,color:'#e7e7e7' }}/>
                              </View>
                          </View>
                          <View style={{flexDirection:'row',paddingBottom:8,marginLeft:15,marginRight:15, paddingTop:8,alignItems:'center',borderBottomWidth:1,borderColor:'#eeeeee'}}>
                              <Image source={require('./img/index_04.png')} style={{width:33,height:33}} resizeMode='stretch'/>
                              <Text style={{paddingLeft: 10,fontSize:16,color:'#333333'}}>特权红包</Text>
                              <View style={{flexDirection:'row',flex:1,justifyContent:'flex-end',alignItems:'center'}}>
                                  <Text style={{fontSize:12,color:'#f16236'}}>每周六20:00:00开枪</Text>
                                  <Awesome name="angle-right" style={{ paddingLeft: 15,fontSize:31,color:'#e7e7e7' }}/>
                              </View>
                          </View>
                          <View style={{flexDirection:'row',paddingBottom:8,marginLeft:15,marginRight:15, paddingTop:8,alignItems:'center'}}>
                              <Image source={require('./img/index_05.png')} style={{width:33,height:33}} resizeMode='stretch'/>
                              <Text style={{paddingLeft: 10,fontSize:16,color:'#333333'}}>7日理财</Text>
                              <Text style={{paddingLeft: 2,fontSize:16,color:'#f16236'}}>5%</Text>
                              <View style={{flexDirection:'row',flex:1,justifyContent:'flex-end',alignItems:'center'}}>
                                  <Text style={{fontSize:12, color:'#a5a5a5',paddingRight:5}}>可提前赎回</Text>
                                  <Awesome name="angle-right" style={{ paddingLeft: 15,fontSize:31,color:'#e7e7e7' }}/>
                              </View>
                          </View>
                      </View>
              </View>
        );
    }
}

const styles = StyleSheet.create({
    mainButton: {
        marginHorizontal: 10, borderRadius: 5, width:130, height: 35, alignItems:'center', justifyContent:'center'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    yue_01:{
        flex:1,
        height:22,
        fontSize:12,
        color:'#a5a5a5'
    },
    yue_02:{
        fontSize:28, color:'#f16236',
    }
});


